/* Reset margin and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%; /* Ensures the body takes the full height of the viewport */
    width: 100%;
}

/*body {*/
/*    background-image: url('../img/team_photo_4.jpg');*/
/*    background-size: cover; !* Ensures the image covers the entire container *!*/
/*    background-position: center; !* Centers the image within the container *!*/
/*    background-repeat: no-repeat; !* Prevents the image from repeating *!*/
/*}*/

/* Header image styling */
.header-image {
    height: 180px;
    width: 100%;
    background-size: cover; /* Ensures the image covers the entire container */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
}

.head-container {
    display: flex;
    justify-content: space-between; /* 将内容和头像分开布局 */
    align-items: center; /* 垂直居中 */
    width: 100%;
    height: 180px;
    padding: 20px;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
}

.themeBtn {
    width: 32px;
    height: 32px;
}

.content {
    width: 100%;
    display: flex;
    flex-direction: column; /* 垂直排列内容 */
    align-items: center;
    gap: 6px; /* 设置每个信息段之间的间距 */
}

.avatar {
    width: 120px;
    height: 142px;
    position: absolute;
    right: 20px; /* 距离右侧20px */
}

.name, .info1, .info2, .info3, .info4 {
    width: 100%;
    padding: 5px;
    text-align: center;
}

.name {
    font-size: 24px;
    font-weight: bold;
}

/* Navbar styling */
.navbar {
    background-color: #333;
}

.navbar ul {
    display: flex;
    list-style-type: none;
    justify-content: space-around;
}

.navbar li {
    position: relative;
}

.navbar a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
    transition: background-color 0.3s;
}

/* 鼠标悬停效果 */
.navbar a:hover {
    background-color: #575757;
    color: cornflowerblue;
}

footer {
    text-align: center;
    padding: 10px 0;
    /*background-color: #f4f4f4;*/
    border-top: 1px solid #ddd;
    /*position: fixed;          !* 固定位置 *!*/
    bottom: 0;                /* 固定在底部 */
}

.icp-number {
    font-size: 14px;
    color: #666;
    text-align: center;
}
